<template>
  <div class="excel-button">
    <el-button
      size="mini"
      type="primary"
      style="margin-right: 10px"
      @click="downloadExcel(templateName, downExcelTem)"
      >下载Excel模版</el-button
    >
    <el-upload
      class="listBTN"
      ref="upload"
      :on-success="handleSuccess"
      :multiple="false"
      accept=".xlsx,.xls"
      :action="upLoadApi"
      :headers="headers"
      :show-file-list="false"
      :on-error="handleError"
      :before-upload="beforeUpload"
    >
      <el-button size="small" type="primary" class="listBTN"
        >导入Excel</el-button
      >
    </el-upload>
  </div>
</template>

<script>
import Vue from "vue";

// const tonken = Vue.cookie.get("token");
export default {
  name: "excelUpload",
  data() {
    return {
      headers: { Authorization: "Bearer " + tonken },
    };
  },
  props: {
    templateName: {
      //Excel文件名称
      type: String,
      default: "导入模版",
    },
    errorFileName: {
      type: String,
      default: "错误数据",
    },
    upLoadApi: {
      //上传接口
      type: Function,
    },
    downExcelTem: {
      //下载Excel模版
      type: Function,
    },
    downErrorExcel: {
      //下载错误数据Excel接口
      type: Function,
    },
    tonken: {
      //token数据
      type: String,
    },
  },
  methods: {
    //下载excel模版
    downloadExcel(name, api, data = "") {
      console.log(this.upLoadApi);
      api(data).then((response) => {
        if (typeof window.chrome !== "undefined") {
          let blob = new Blob([response], {
            type: "application/force-download",
          });
          let link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          link.download = name + ".xls";
          link.click();
        } else if (typeof window.navigator.msSaveBlob !== "undefined") {
          let blob = new Blob([response], {
            type: "application/force-download",
          });
          window.navigator.msSaveBlob(blob, name + ".xls");
        } else {
          let file = new File([response], name + ".xls", {
            type: "application/force-download",
          });
          window.open(URL.createObjectURL(file));
        }
      });
    },

    beforeUpload(file) {
      //上传之前校验
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let isExcel = extension == "xlsx" || extension == "xls";
      let size = file.size / 1024 / 1024 < 10;
      if (!isExcel) {
        this.$alert("只能上传Excel表格", { dangerouslyUseHTMLString: true });
      }
      if (!size) {
        this.$alert("文件大小不得超过10M", { dangerouslyUseHTMLString: true });
      }
      return isExcel && size;
    },
    // 导入成功的回调
    handleSuccess(res, file, fileList) {
      // this.$refs.upload.clearFiles();
      this.$alert(res.msg, "导入结果", { dangerouslyUseHTMLString: true }).then(
        () => {
          // this.$parent.$parent.$refs.crudForm
          //   ? this.$parent.$parent.$refs.crudForm.getDataInit()
          //   : this.$parent.$parent.$refs.biaoge.cx({ current: 1, size: 20 });
          this.$emit("refresh", res); //刷新页面
          if (res.code == "300") {
            //下载错误数据
            this.downloadExcel(
              this.errorFileName,
              this.downErrorExcel,
              res.data
            );
          }
        }
      );
      // this.$parent.$parent.$refs.crudForm.getDataInit()

      this.$emit("refresh",res)
    },
    // 导入失败的回调
    handleError(err, file, fileList) {
      this.$alert("导入失败", "导入结果", { dangerouslyUseHTMLString: true });
    },
  },
};
</script>

<style lang="scss" scoped>
.excel-button {
  float: right;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-button {
    height: 32px;
  }
}
</style>
